<template>
    <el-container
        id="access-reconciliation"
        style="height:100%"
        class="access-reconciliation"
    >
        <el-main>
            <div
                class="clearfix"
            >
                <div>
                    <div class="new-flex">
                        <!-- <dataSelect @callback="sysSelectedHandel" style="margin-right:16px"></dataSelect> -->
                        <el-form
                            ref="form"
                            :model="searchForm"
                            label-width="100px"
                            inline
                            style="width:100%"
                        >
                            <el-form-item class="input-right">
                                <el-input
                                    v-model="searchForm.searchConditions"
                                    clearable
                                    placeholder="请输入查询条件"
                                    @keyup.enter.native="search"
                                >
                                    <i
                                        slot="suffix"
                                        style="line-height: 35px;"
                                        class="font_family iconfont icon-sousuo"
                                        @click="search"
                                    ></i>
                                </el-input>
                            </el-form-item>

                            <el-form-item
                                label="是否异常："
                                class="input-right"
                            >
                                <el-select
                                    v-model="searchForm.normal"
                                    clearable
                                    min-width="100"
                                    @change="search"
                                >
                                    <el-option
                                        v-for="(item, index) in [ {
                                            value: '',
                                            label: '全部',
                                        },{
                                            value: 1,
                                            label: '是',
                                        }, {
                                            value: 0,
                                            label: '否',
                                        }]"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                label="业务系统："
                                class="input-right"
                            >
                                <el-select
                                    v-model="searchForm.id"
                                    clearable
                                    min-width="100"
                                    @change="search"
                                >
                                    <el-option
                                        v-for="(item, index) in stateList"
                                        :key="index"
                                        :label="item.businessSystemName"
                                        :value="item.businessSystemId"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="table-wrapper">
                <div id="accessContent">
                    <el-table
                        ref="accessTable"
                        v-loading="loading"
                        :data="accessTableData"
                        stripe
                        tooltip-effect="light"
                        style="width: 100%;overflow:auto;height:316px"
                        class="flex-1 access-table"
                    >
                        <el-table-column
                            label="序号"
                            min-width="50"
                            align="left"
                        >
                            <template slot-scope="scope">
                                {{ calcTableRowIndex(scope.$index) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="业务系统"
                            min-width="50"
                            prop="accessBusinessSystemName"
                            show-overflow-tooltip
                        >
                        </el-table-column>

                        <el-table-column
                            label="数据项集中文名称"
                            min-width="50"
                            prop="dataItemSetsName"
                            show-overflow-tooltip
                        >
                        </el-table-column>

                        <el-table-column
                            label="是否异常"
                            min-width="50"
                            prop="normal"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.normal!==0">是</span>
                                <span v-if="scope.row.normal===0">否</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="接入源名称"
                            min-width="50"
                            prop="sourceName"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            label="数据来源类型"
                            min-width="50"
                            prop="accessSourceType"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column

                            label="操作"
                            min-width="150"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <el-tooltip
                                    class="item"
                                    effect="light"
                                    content="接入源"
                                    placement="top"
                                >
                                    <i
                                        class="OSS iconjieru enc-icon1"
                                        @click="
                                            viewSource(scope.row.assetDataSourceId)
                                        "
                                    ></i>
                                </el-tooltip>
                                <el-tooltip
                                    class="item"
                                    effect="light"
                                    content="对账详情"
                                    placement="top"
                                >
                                    <i
                                        class="OSS iconwenbenxiangqing enc-icon1"
                                        @click="
                                            viewReconciliation(
                                                scope.row.accessTaskId
                                            )
                                        "
                                    ></i>
                                </el-tooltip>
                                <el-tooltip
                                    class="item"
                                    effect="light"
                                    content="销账"
                                    placement="top"
                                >
                                    <i
                                        class="OSS iconfeizhi enc-icon1"
                                        @click="delAccount(scope.row.accessTaskId)"
                                    ></i>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--  分页  -->
                    <div
                        class="clearfix enc-pagination"
                        style="margin:20px 0"
                    >
                        <el-pagination
                            style="float:right"
                            background
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :total="accessTableDataTotal"
                            :page-size="pageSize"
                            layout="prev,pager,next,jumper,sizes,total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
                <!--查看接入源-->
                <accessSource
                    v-if="accessSourceVisible"
                    ref="accessSource"
                    @callBack="accessSourceVisible=false"
                ></accessSource>

                <reconciliationDetail
                    v-if="reconciliationDetailVisible"
                    ref="reconciliationDetail"
                    @callBack="reconciliationDetailVisible=false"
                ></reconciliationDetail>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import accessSource from '@/views/accessStatementAccount/dialog/accessSource';
import reconciliationDetail from '@/views/accessStatementAccount/dialog/reconciliationDetail';

import { getlist, getBusinessList, clearStatement } from '@/api/databaseManagement';

export default {
    data() {
        return {
            sysSelectedValue: {},
            dialogVisible: false,
            outerVisible: false,
            dialog: {},
            searchInput: '',
            stateList: [],
            searchForm: {
                status: 1,
                searchConditions: '',
                dateRange: '',
                accountStatus: '',
                id: '',
                normal: '',
            },
            currentPage: 1,
            pageSize: 10,
            accessTableData: [],
            accessTableDataTotal: 1,
            loading: false,
            pickerOptions: {
                disabledDate(time) {
                    if (
                        new Date(time.getTime()).toDateString()
                        === new Date().toDateString()
                    ) {
                        // 今天
                        if (time.getTime() > Date.now()) {
                            time.setTime(new Date());
                        }
                    }
                    return time.getTime() > Date.now();
                },
            },
            setVisible: false,
            checkedData: [
                'statementStatus',
                'statementNumber',
                'statementTime',
                'accessTime',
                'accessBusinessSystemName',
                'dataItemSetsName',
                'dataCount',
                'dataSize',
                'sourceName',
                'accessSourceDialectId',
            ],
            tableHeadAllData: [],
            accessSourceVisible: false,
            reconciliationDetailVisible: false,
        };
    },
    components: {
        accessSource,
        reconciliationDetail,
    },
    activated() {
        this.search();
        this.getBusinessListFunction();
    },
    created() {
        this.search();
        this.getBusinessListFunction();
    },
    methods: {
        changeSideBar() {
            this.sideBarWidth = this.sideBarWidth === 0 ? 284 : 0;
        },
        sysSelectedHandel(val) {
            if (val.sysName === '全部') {
                this.sysSelectedValue = '';
            } else {
                this.sysSelectedValue = val.sysName;
            }
            // this.allChineseField();
            this.search();
        },
        handleCheckedChange(val) {
            this.checkedData = val;
            const arry = [];
            for (let i = 0; i < val.length; i += 1) {
                for (let j = 0; j < this.tableHeadAllData.length; j += 1) {
                    if (val[i] === this.tableHeadAllData[j].name) {
                        arry.push(this.tableHeadAllData[j]);
                    }
                }
                this.tableHeadData = arry;
            }
        },
        // 搜索
        search() {
            if (this.searchForm.accountStatus === null) {
                this.searchForm.accountStatus = '';
            }
            this.currentPage = 1;
            this.accessTableData = [];
            this.loadTable();
        },
        // 表格加载
        async loadTable() {
            try {
                await this.getDataList();
            } catch (error) {}
        },
        getBusinessListFunction() {
            getBusinessList().then((res) => {
                if (res.data.resultCode === 0) {
                    this.stateList = res.data.data;
                    this.stateList.splice(0, 0, {
                        businessSystemId: '',
                        businessSystemName: '全部',
                    })
                }
            })
                .catch((err) => {
                    console.error(err);
                });
        },
        // 获取数据列表
        getDataList() {
            this.loading = true;
            this.accessTableData = [];
            const searchObj = {
                queryTxt: this.searchForm.searchConditions, // 输入条件
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                id: this.searchForm.id,
                normal: this.searchForm.normal,
            };
            console.log(searchObj);
            getlist(searchObj)
                .then((res) => {
                    this.loading = false;
                    if (res.data.resultCode === 0) {
                        this.accessTableDataTotal = res.data.data.recordTotal;
                        this.accessTableData = res.data.data.data;
                    }
                })
                .catch((err) => {
                    console.error(err);
                    this.loading = false;
                });
        },
        // 时间戳格式转普通日期格式
        transformTime(timestamp) {
            if (timestamp) {
                const time = new Date(timestamp);
                const y = time.getFullYear();
                const M = time.getMonth() + 1;
                const d = time.getDate();
                const h = time.getHours();
                const m = time.getMinutes();
                const s = time.getSeconds();
                return `${y}-${this.addZero(M)}-${this.addZero(d)}  ${this.addZero(
                    h,
                )}:${this.addZero(m)}:${this.addZero(s)}`;
            }
            return '';
        },
        addZero(m) {
            return m < 10 ? `0${m}` : m;
        },
        // 页面跳转
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadTable();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.loadTable();
        },
        // 查看接入源
        viewSource(id) {
            this.accessSourceVisible = true;
            this.$nextTick(() => {
                this.$refs.accessSource.openDialogVisible(id);
            });
        },
        // 查看对账详情
        viewReconciliation(number) {
            this.reconciliationDetailVisible = true;
            setTimeout(() => { this.$refs.reconciliationDetail.openDialogVisible(number); }, 100);
        },
        // 销账
        delAccount(id) {
            this.$confirm('是否确定销账？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                confirmButtonClass: 'el-button--primary',
                type: 'warning',
            }).then(() => {
                clearStatement({ taskId: id })
                    .then((res) => {
                        if (res.data.resultCode === 0) {
                            this.$message.success('销账成功！');
                            this.search();
                        } else {
                            this.$message.error(res.data.resultMessage);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                    });
            });
        },
        // 设置表头
        sethandel() {
            this.setVisible = !this.setVisible;
        },
        mouseleave() {
            this.setVisible = !this.setVisible;
        },
        calcTableRowIndex(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1;
        },
    },
    filters: {
        accessSourceHandel(type) {
            if (type === 10001) {
                return 'Mysql';
            }
            if (type === 10002) {
                return 'Oracle';
            }
            if (type === 10003) {
                return 'PostgreSQL';
            }
            if (type === 10004) {
                return 'MongoDB';
            }
            if (type === 10005) {
                return 'FTP';
            }
            if (type === 10006) {
                return 'RESTful(拉)';
            }
            if (type === 10007) {
                return 'RESTful(推)';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
// @import "src/styles/variables.scss";
// @import "src/styles/mixin.scss";
.input-right{
    float: right;
    margin-right: 16px !important;
}
.access-reconciliation /deep/ .el-input__suffix {
  top: 0px;
}
.left-aside {
  // @include aside-bg-color($enc-aside-background-theme);
  overflow: auto;
  height: 100%;
}
.sys-main {
  width: 100%;
  background: #fff;
}

.btn_style {
  color: #0090ff;
  font-size: 14px;
}

.button-group {
  margin-top: 40px;
  clear: both;
  margin-bottom: 10px;
}
.bg-white {
  background: #fff !important;
  color: #6f8293 !important;
  border: 1px solid #dcdfe6 !important;
}
.access-monitor-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  /*border:1px solid black;*/
}
#access-reconciliation .search_box {
  margin-top: 20px;
  padding: 15px;
  .search_right {
    float: right;
  }
}
.table-wrapper {
  padding: 0 32px;
  position: relative;
}
#access-reconciliation .access_operate > span {
  cursor: pointer;
  margin-right: 15px;
  color: #009ddf;
}
.main-search {
  // float: right;
  padding-bottom: 10px;
  & .el-input {
    width: 300px;
  }
}
// .new-serch /deep/ .el-input__suffix {
//   top: 8px;
// }

.new-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0 32px;
}

.set_box {
  margin-left: 8px;
  .el-checkbox-group > label {
    display: block;
  }
  > span {
    cursor: pointer;
  }
  .set_content {
    position: absolute;
    right: 0px;
    top: 27px;
    background-color: #ffffff;
    z-index: 1001;
    border: 1px solid #e6eaed;
    padding: 8px;
    height: 400px;
    overflow: auto;
  }
}
#access-reconciliation .access-table {
  .icon-dui {
    font-size: 26px;
    color: #67c23a;
  }
  .icon-cuo {
    font-size: 26px;
    color: #ff0000;
  }
  .icon-jinggao {
    font-size: 26px;
    color: #e6a23c;
  }
  .icon-xiaozhang.xz {
    font-size: 26px;
    color: #e6a23c;
  }
}
#accessContent {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 230px);
  width: 100%;
}
.item {
  margin-right: 20px;
}


</style>
